[npub].tsx (1953B)
1 import { ParsedNote } from "@/components/note/NostrNoteView"; 2 import { useEffect, useState } from "react"; 3 import English from "@/../content/compiled-locales/en.json"; 4 import { IntlProvider, useIntl } from 'react-intl' 5 import { Purple2024YearInReview } from "@/components/pages/purple-2024-year-in-review"; 6 7 export default function User2024InReviewPage({ stats }: { stats: Npub2024InReviewStats }) { 8 // Automatically detect the user's locale based on their browser settings 9 const [language, setLanguage] = useState("en"); 10 const [messages, setMessages] = useState(English); 11 12 useEffect(() => { 13 setLanguage(navigator.language); 14 }, []); 15 16 useEffect(() => { 17 switch (language) { 18 case "en": 19 setMessages(English); 20 break; 21 case "ja": 22 // TODO: Add Japanese translations and then switch to "Japanese" below 23 setMessages(English); 24 break; 25 default: 26 setMessages(English); 27 break; 28 } 29 }, [language]); 30 31 return (<> 32 <IntlProvider 33 locale={language} 34 messages={messages} 35 onError={() => null}> 36 <Purple2024YearInReview stats={stats} /> 37 </IntlProvider> 38 </>) 39 } 40 41 42 type Purple2024InReviewStats = Record<npub, Npub2024InReviewStats>; 43 type npub = string; 44 export type Npub2024InReviewStats = { 45 most_zapped_post: ParsedNote 46 most_zapped_post_sats: number 47 number_of_posts?: number 48 }; 49 50 export async function getStaticPaths() { 51 let stats: Purple2024InReviewStats = require('stats.json'); // TODO: Fetch from API 52 const paths = Object.keys(stats).map((npub) => ({ params: { npub } })); 53 return { paths, fallback: false }; 54 } 55 56 type Params = { 57 params: { 58 npub: string; 59 }; 60 }; 61 62 // This also gets called at build time 63 export async function getStaticProps({ params }: Params) { 64 const stats: Purple2024InReviewStats = require('stats.json'); // TODO: Fetch from API 65 const npub = params.npub as string; 66 return { props: { stats: stats[npub] } }; 67 }